<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<title>HTML5钢琴</title>
	<!-- 点击爱心特效代码 -->
	<script src="https://cdn.jsdelivr.net/gh/Zevs6/CDN/js/aixintexiao.js"></script>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}

		html {
			width: 100vw;
			height: 100vh;
			/* 设置鼠标图片样式 */
			cursor: url(https://cdn.jsdelivr.net/gh/Zevs6/CDN/img/cursor/normal.cur), auto;
			user-select: none;
		}

		/*-------------介绍--------------*/
		.button {
			position: absolute;
			left: 100px;
			top: 50px;
			width: 100px;
			height: 30px;
			background-color: #A5DE37;
			border-color: #A5DE37;
			border-radius: 200px;
			-webkit-box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);
			box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);
			color: white;
			line-height: 30px;
			text-align: center;
			cursor: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/texto.cur), auto;
			user-select: none;
			/*--让文字无法被选中--*/
			transition-duration: .3s;
		}

		.button:hover {
			background-color: #b9e563;
			border-color: #b9e563;
			box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3);
		}

		.button:active {
			background-color: #a1d243;
			border-color: #a1d243;
			color: #8bc220;
			box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2);
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
			transition-property: all;
			transition-duration: .15s;
		}

		#js {
			display: none;
			position: absolute;
			left: 100px;
			top: 100px;
			width: 350px;
			height: 200px;
			padding-left: 10px;
			background: rgb(244, 226, 255);
			border: rgb(255, 255, 255) solid 3px;
			border-style: double;
			border-radius: 10px;
			color: rgb(56, 56, 56);
			line-height: 30px;
		}

		/*-------钢琴部分--------*/
		ul {
			width: 480px;
			height: 360px;
			transform: translate(-50%, -50%);
			position: absolute;
			top: 50%;
			left: 50%;
		}

		li {
			float: left;
			list-style-type: none;
			position: relative;
		}

		li>div {
			height: 360px;
			width: 60px;
			background: rgba(255, 255, 255, .3);
			border: 1px solid;
			border-color: rgba(0, 0, 0, .8);
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
			box-sizing: border-box;
			box-shadow:
				/*inset  3px 0  10px  #c9c6c6,*/
				inset 5px -8px 0 #00000023;
			text-align: center;
			display: table-cell;
			vertical-align: bottom;
		}

		li:not(:last-child)>div {
			border-right: none;
		}

		/* 当白键按下时的样式 */
		li>div:active {
			box-shadow: inset 3px -2px 0 #00000036;
			background: linear-gradient(45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .5));
		}

		.white_active {
			box-shadow: inset 3px -2px 0 #00000036;
			background: linear-gradient(45deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .5));
		}

		.show {
			background: rgb(255, 97, 97);
		}

		li>p {
			height: 200px;
			width: 40px;
			background-color: #000;
			border-bottom-left-radius: 5.5px;
			border-bottom-right-radius: 5.5px;
			box-shadow: inset 5px -7px 0 #2c2c2c;
			position: absolute;
			top: 0;
			left: 40px;
			z-index: 999;
		}

		li>p:hover {
			background: linear-gradient(45deg, #4c4c4c, #444444);
		}

		/* 当黑键按下时的样式 */
		li>p:active {
			box-shadow: inset 3px -5px 0 #2c2c2c;
		}

		.black_active {
			box-shadow: inset 3px -5px 0 #2c2c2c;
		}

		#text {
			width: 200px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			position: absolute;
			top: calc(50vh + 180px);
			left: 50%;
			transform: translate(-50%);
		}

		/* 移动端样式 */
		@media (max-width: 520px) {
			ul {
				width: 98vw;
				height: 50vh;
			}

			li>div {
				width: 12vw;
				height: 50vh;
			}

			li>p {
				width: 10vw;
				height: 25vh;
				left: 7vw;
			}

			#text {
				top: 75vh;
			}
		}
	</style>
</head>

<body>
	<div id="sy" onclick="Mtued()"></div>
	<div>
		请输入歌曲名：
		<input type="text" id="song" placeholder="请输入歌曲名">
		<button id="check">确定</button>
	</div>
	<ul>
		<li>
			<div></div>
			<p></p>
		</li>
		<li>
			<div></div>
			<p></p>
		</li>
		<li>
			<div></div>
		</li>
		<li>
			<div></div>
			<p></p>
		</li>
		<li>
			<div></div>
			<p></p>
		</li>
		<li>
			<div></div>
			<p></p>
		</li>
		<li>
			<div></div>
		</li>
		<li>
			<div></div>
		</li>
	</ul>
	<div id="text"></div>
	<div class="button" id="btn-js">
		<a>使用介绍</a>
	</div>
	<div id="js">
		使用键盘上的S~L键操作钢琴白键,E,R,Y,U,I操作钢琴黑键，也可以通过鼠标点击来弹奏钢琴。
		可通过快捷键V键控制琴键上数字的显示与隐藏。目前只支持四首歌曲，晴天，最长的电影，同桌的你，送别。
	</div>
</body>
<script src="piano.js"></script>

</html>